<template>
  <div class="iconList">
    <div class="iconItem">
      <img :src="guess" alt="" />
      <span class="today">{{ today }}</span>
      <span>每日推荐</span>
    </div>
    <div class="iconItem">
      <img :src="fm" alt="" />
      <span>私人FM</span>
    </div>
    <div class="iconItem">
      <img :src="list" alt="" />
      <span>歌单</span>
    </div>
    <div class="iconItem">
      <img :src="rate" alt="" />
      <span>排行榜</span>
    </div>
  </div>
</template>

<script>
import fm from "@/assets/fm.png";
import guess from "@/assets/guess.png";
import list from "@/assets/list.png";
import rate from "@/assets/rate.png";
import { onMounted } from "@vue/runtime-core";
export default {
  setup() {
    // let today = this.computed(()=>{

    //     return
    // })
    let today = new Date().getDate();
    return {
      fm,
      guess,
      list,
      rate,
      today,
    };
  },
};
</script>

<style lang="less" scoped>
.iconList {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  .iconItem {
    position: relative;
    width: 25%;
    height: 100%;
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    .today {
      position: absolute;
      top: 35%;
      left: 41%;
      color: #fff;
      font-weight: 600;
      font-size: 0.3rem;
    }
    img {
      width: 1rem;
      height: 1rem;
    }
  }
}
</style>
